<template>
    <div>
        <div ref="echartsContainer" style="width:600px;height:600px;">

        </div>
    </div>
</template>

<script setup lang="ts">

    //region # 属性

    // 应用实例
    const { proxy }:any = getCurrentInstance()

    // Props
    defineOptions({
        name: 'DemoEchartsView'
    })

    // 容器
    const echartsContainer = ref()

    // 设置
    const option = {
        // 标题
        title: {
            text: '示例',
            left: '0%',
            textStyle: {
                color: '#000000',
                fontSize: '14'
            }
        },
        // 鼠标经过信息
        tooltip: {
            trigger: 'axis',
            formatter: `{b}：{c} 个`
        },
        // X轴
        xAxis: {
            // 标题
            axisLabel: {
                color: '#000000',
                fontSize: 12,
                margin: 12
            },
            // 刻度
            axisTick: {
                show: true
            },
            // 数据
            data: [ '1月', '2月', '3月', '4月' ]
        },
        // Y轴
        yAxis: {
            type: 'value',
            // 标题
            axisLabel: {
                color: '#000000'
            },
            // 网格线
            splitLine: {
                lineStyle: {
                    color: [ '#032255', '#173974' ]
                }
            }
        },
        // 基础配置
        series: [
            {
                type: 'line',
                itemStyle: {
                    color: '#000000'
                },
                smooth: true,
                data: [ 500, 1000, 1500, 2000 ]
            }
        ]
    }

    //endregion

    //region # 事件

    /**
     * 加载完毕
     * */
    onMounted(() => {

        const echarts = proxy.$echarts.init(echartsContainer.value)
        echarts.setOption(option)

        // 根据页面大小自动响应图表大小
        window.addEventListener('resize', function() {
            echarts.resize()
        })
    })

    //endregion

</script>

<style scoped>

</style>